<template>
    <a-layout-content style="padding: 0 50px; margin: 50px 0">
        <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-sider width="200" style="background: #fff">
                <a-menu
                        style="height: 100%"
                        mode="inline"
                        @click="menuClick" >
                    <a-menu-item key="welcome">
                        <MailOutlined />
                        你好
                    </a-menu-item>
                    <a-sub-menu v-for="item in level1" :key="item.id">
                        <template #title>
                        <span>
                          {{item.name}}
                        </span>
                        </template>
                        <a-menu-item v-for="itemc in item.children" :key="itemc.id">{{itemc.name}}</a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>


            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                <!--欢迎页-->
                <div class="welcome" v-show="welcomeShow" >
                   <the-welcome></the-welcome>
                </div>
                <!--                渲染数据s              -->
                <a-list  v-show="!welcomeShow"  item-layout="vertical" size="large"
                        :grid="{ gutter: 16  ,column :3 }"
                        :data-source="ebook">
                    <template #renderItem="{ item }">
                        <a-list-item key="item.id">
                            <template #actions>
                              <span v-for="{ type, text } in actions" :key="type">
                                <component v-bind:is="type" style="margin-right: 8px"/>
                                {{ text }}
                              </span>
                            </template>
                            <a-list-item-meta :description="item.description">
                                <template #title>
                                    <a>
                                    <router-link :to="'/doc/?ebookId=' + item.id">
                                        {{ item.name }}
                                    </router-link>
                                    </a>
                                </template>

                                <template #avatar>
                                    <a-avatar :src="item.cover"/>
                                </template>
                            </a-list-item-meta>
                            {{ item.content }}
                        </a-list-item>
                    </template>
                </a-list>
                <!--                渲染数据e              -->
            </a-layout-content>
        </a-layout>
    </a-layout-content>
</template>
<script lang="ts">

    import {defineComponent, onMounted, ref} from 'vue';
    import axios from 'axios';
    import {Tool} from "@/util/tool";
    import {message} from "ant-design-vue";
    import TheWelcome from '@/components/the-welcome.vue';

    export default defineComponent({
        name: 'Home',
        components: {
            TheWelcome
        },
        setup() { //入口
            console.log("setup");
            const ebook = ref();//声明动态数据

            const actions: Record<string, string>[] = [
                {type: 'StarOutlined', text: '156'},
                {type: 'LikeOutlined', text: '156'},
                {type: 'MessageOutlined', text: '2'},
            ];


            const level1 = ref();
            /**
             * 数据查询
             **/
            const handleQueryCategory = () => {
                axios.get("/category/all").then((response) => {
                    const data = response.data;
                    if (data.success){
                        var categorys = data.content; //
                        level1.value=[];
                        level1.value=Tool.array2Tree(categorys,0)
                        console.log(level1.value)

                    }else{
                        message.error(data.message);
                    }
                });
            };


            const welcomeShow=ref(true);
            let category2Id = 0;
            const menuClick = ( menu :any ) => {
                // console.log("点击了")
                if(menu.key=="welcome"){
                    welcomeShow.value=true
                }else {
                    welcomeShow.value=false
                    category2Id =menu.key;
                    handleQuery()
                }
            };
            const handleQuery = ()=>{
                axios.get("/ebook/list",{
                    params:{
                        category2Id:category2Id
                    }
                }).then(rsp => {
                    ebook.value = rsp.data.content.list;//动态数据赋值
                })
            }


            onMounted(() => {  //页面渲染后
                handleQueryCategory()
            })
            return {
                actions,
                ebook,
                level1,
                menuClick,
                welcomeShow
            };
        },
    });
</script>
<!--scoped 只在当前页面生效-->
<style scoped>
    .ant-avatar {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 8%;
        margin: 5px;
    }
</style>
<!--<script lang="ts">-->
<!--import { Options, Vue } from 'vue-class-component';-->
<!--import axios from 'axios';-->

<!--@Options({-->
<!--    name: 'Home',-->
<!--    setup(){ //初始化方法-->
<!--        console.log("setup")-->
<!--        axios.get("http://localhost:8099/ebook/list?name=js").then( rsp =>{-->
<!--            console.log(rsp)-->
<!--        })-->
<!--    },-->
<!--})-->
<!--export default class Home extends Vue {-->
<!--}-->
<!--</script>-->
